<template>
	<div class="collect-batch">
		<button class="collect-btn" trigger="click" @click="showData" :class="{'btn-width': !$slots.default}">
			<p>{{btnText}}</p>
			<i class="el-icon-caret-bottom"></i>
		</button>
		<div class="collect-box" v-show="showBatch" @mouseleave="showBatch = false" :class="{'btn-width': !$slots.default}">
			<p v-for="(item, index) of batchData" :key="index" @click="collectBatch(item.samplePeriod)">{{ item.samplePeriod }}</p>
			<p @click="collectBatch('')">查询全部</p>
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	props: {
		batchData: {
			type: Array,
			default: ()=>{return []}
		}
	},
	data() {
		return {
			btnText: '选择采样期次',
			showBatch: false
		};
	},
	methods:{
		showData() {
			this.showBatch = !this.showBatch
		},
		collectBatch(item) {
			if(item != '')
			{
				this.btnText = item
			}else {
				this.btnText = '全部'
			}
			this.$emit('changeSamplePeriod',item)
			this.showBatch = false
		}
	}
};
</script>

<style scoped lang="less">
.btn-width {
	width: 385px !important;
}
.collect-batch {
	display: flex;
	// align-items: center;
	justify-content: space-between;
	margin: 20px 0px;
	.collect-btn {
		width: 200px;
		background-color: rgba(0, 227, 228, 0.1);
		border: none;
		display: flex;
		align-items: center;
		padding: 7px 19px;
		outline: none;
		p {
			text-align: left;
			flex: 1;
			color: #c8c8c8;
			font-size: 16px;
		}
		i {
			font-size: 25px;
			color: #00e3e4;
		}
	}
	.collect-box {
		width: 200px;
		background-color: rgba(0, 0, 0, 0.7);
		padding: 10px 0px;
		font-size: 16px;
		color: white;
		margin-top: 40px;
		text-align: center;
		z-index: 9999;
		cursor: pointer;
		
		position: absolute;
		p {
			line-height: 30px;
		}
		p:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}
	}
}
</style>
